<template>

	<view class="cash-record">

		<view class="total-amount">
			<view class="total-label">累计提现</view>
			<view class="total-value">{{ totalAmount }}元</view>
		</view>

		<!-- 提现记录列表 -->
		<view class="mui-border-1-bottom margin-b-70" v-if="recordList.length > 0">
			<view class="withdraw-yes"  v-for="(item, index) in recordList" :key="index">
				<view class="withdraw-top">
					<image src="/static/alipay.jpg"></image>
					<view class="withdraw-top-price">+ {{ item.price }} 元</view>
					 <text :class="['withdraw-status',getStatusColor(item.status)]">{{ item.status_text }}</text>
				</view>
				<view class="withdraw-bottom">申请时间：<text>{{ item.created_at }}</text></view>
				<view class="withdraw-bottom">订单号：<text>{{ item.order_sn }}</text></view>
				<view class="withdraw-bottom">收款支付宝账号：<text>{{ item.alipay_account }} </text></view>
				<view class="withdraw-bottom">收款支付宝实名信息：<text>{{ item.realname }} </text></view>
			</view>

			<!-- <view class="record-item" v-for="(item, index) in recordList" :key="index">
				<view class="record-header">
					<text class="record-amount">¥{{ item.price }}</text>
					<text :class="['record-status', getStatusColor(item.status)]" >{{ item.status_text }}</text>
				</view>
				<view class="record-content">
					<view class="record-info">
						<text class="record-label">申请时间：</text>
						<text class="record-value">{{ item.created_at }}</text>
					</view>
				</view>
			</view> -->
		</view>

		<!-- 空态 -->
		<view class="empty-box" v-else>
			<image class="empty-img" src="/static/withdraw-no.png" mode="aspectFit" /> <!-- 修改空态图 -->
			<text class="empty-text">暂无提现记录</text>
		</view>
	</view>
	<view v-if="loading" class="loading-text">{{noMore}}</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getCashMoney } from "@/api/member.js"
import { onReachBottom,onPullDownRefresh } from "@dcloudio/uni-app"

const recordList = ref([])
const loading = ref(false)
const totalAmount = ref('0.00')

const page = ref(1);
const pageSize = ref(10);
const lastPage = ref(0);
const noMore = ref("加载中...");      // 是否无更多数据

function getStatusColor(status) {
	switch (status) {
		case -1:
			return 'layui-badge';
		case 0:
			return 'layui-bg-orange';
		case 1:
			return 'layui-bg-green';
		default:
			return '';
	}
}

// 获取提现记录
async function getRecordList() {
	try {
		loading.value = true;

		const params = {
			page:page.value,
			pageSize:pageSize.value
		}

		const res = await getCashMoney(params)

		if (page.value === 1) {
			// 第一页直接赋值
			recordList.value = res.data;
		} else {
			// 追加数据
			recordList.value = [...recordList.value, ...res.data];
		}

		totalAmount.value = res.total_price || '0.00'
		lastPage.value = res.last_page || 1;

	} catch (e) {
		console.error(e)
	} finally {
		loading.value = false;
    uni.stopPullDownRefresh();
	}
}

function goBack() {
	uni.navigateBack()
}

onMounted(() => {
	getRecordList()
})

onReachBottom(()=>{
	console.log("onReachBottom")
		loading.value=true;
		if(lastPage.value<=page.value){
			noMore.value="没有更多了";
			// 3秒后重置noMore状态
		setTimeout(() => {
			loading.value = false;
		}, 3000);
	}else{
		noMore.value="加载中...";
		page.value+=1;
		getRecordList();
	}
});
onPullDownRefresh(()=>{
	loading.value=false;
	noMore.value = false;
	page.value=1;
	getRecordList();

});
</script>

<style scoped>
.cash-record {
    min-height: 100vh;
    background: #f6f7fb;
    display: flex;
    flex-direction: column;
}

.total-amount {
    /* background: #FFA500; */
    width: 100%;
        height: 5rem;
        background: url("/static/widthdraw-total-bg.png") 100% 100%;
        margin-top: 0.5rem;
        border-radius: 1rem;
        background-size: 100%;

}

.total-value {
	width: 50%;
    height: 1rem;
    margin-top: 0.5rem;
    float: left;
    margin-left: 1.5rem;
    font-size: 14px;
    color: #fff;
}

.total-label {
	width: 50%;
    height: 1rem;
    margin-top: 0.5rem;
    float: left;
    margin-left: 1.5rem;
    font-size: 14px;
    color: #fff;
}

.top-icon {

    tint-color: #007aff; /* 修改返回图标颜色为蓝色 */
}

.top-title {
    flex: 1;
    text-align: center;
    font-size: 34rpx; /* 调整字体大小 */
    color: #333; /* 修改字体颜色为深灰色 */
    font-weight: bold; /* 加粗字体 */
}

.empty-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40rpx;
}

.empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 18rpx;
}

.record-list {
    width: 80%; /* 与 total-amount 的宽度一致 */
    margin: 0 auto; /* 居中对齐 */
    margin-top: 20rpx; /* 与上方的间距 */
}

.record-item {
    background: #fff; /* 白色背景 */
    border-radius: 10rpx; /* 圆角 */
    margin-bottom: 20rpx; /* 每个记录之间的间距 */
    padding: 20rpx; /* 内边距 */
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.record-header {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;
    margin-bottom: 10rpx; /* 与内容的间距 */
}

.record-amount {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.record-status {
    font-size: 24rpx;
    font-weight: bold;
}

.record-content {
    border-top: 1rpx solid #f0f0f0; /* 分割线 */
    padding-top: 10rpx;
    margin-top: 10rpx;
}

.record-info {
    display: flex;
    justify-content: space-between;
}

.record-label {
    font-size: 24rpx;
    color: #666;
}

.record-value {
    font-size: 24rpx;
    color: #333;
}
	.record-status {
		font-size: 24rpx;
		font-weight: bold;
		color: inherit; /* 默认继承动态绑定的颜色 */
	}

	.loading-text {
		text-align: center;
		padding: 20rpx;
		color: #999;
		background: #f6f7fb;;
	}

	.mui-border-1-bottom{
		position: relative;
	}
	.margin-b-70{
		margin-bottom: 70px !important;
	}
	.withdraw-yes {
	    background: #fff;
	    margin: 0.5rem 0.4rem 0 0.4rem;
	    padding: 0 0 0.5rem 0;
	    border-radius: 10px;
	    box-shadow: 0 0.053333rem 0.213333rem 0 rgba(0, 0, 0, .06);
	}
	.withdraw-top {
	    width: 100%;
	    height: 5rem;
	}
	.withdraw-bottom {
	    width: 100%;
	    padding: 0 1rem;
	    box-sizing: border-box;
	}

	.withdraw-top image {
	    width: 3rem;
	    height: 3rem;
	    margin: 1rem 0.5rem 1rem 1rem;
	    float: left;
	}

	.withdraw-top-price {
	    height: 3rem;
	    float: left;
	    margin-top: 1rem;
	    line-height: 3rem;
	    font-size: 16px;
	    font-weight: bold;
	    color: #fe3d68;
	}
	.withdraw-status {
	    height: 1.5rem;
	    display: block;
	    float: right;
	    margin-top: 1.5rem;
	    text-align: right;
	    line-height: 1.5rem;
	    font-size: 14px;
	}

	.layui-badge
	 {
	    position: relative;
	    display: inline-block;
	    padding: 0 6px;
	    font-size: 12px;
	    text-align: center;
	    background-color: #FF5722;
	    color: #fff;
	    border-radius: 2px;
	}

	.layui-bg-green {

		position: relative;
		display: inline-block;
		padding: 0 6px;
		font-size: 12px;
		text-align: center;
		background-color: #009688 !important;
		color: #fff;
		border-radius: 2px;
	}
	.layui-bg-orange{
		position: relative;
		display: inline-block;
		padding: 0 6px;
		font-size: 12px;
		text-align: center;
		background-color: #FFB800!important;
		color: #fff;
		border-radius: 2px;
	}
</style>
